<template>
  <view class="payment-term">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="我的钱包" />
    <div class="pay-list div-sizing">
      <div v-for="(item,index) in payInfo" :key="index" class="u-flex u-ju-between u-ali-center pay-item div-sizing">
        <div class="u-flex">
          <image class="pay-img" :src="index == 1 ? alipayImg : index == 2 ? wechatImg : index == 3 ? bankImg : index == 4 ? usdtImg : ''"></image>
          <div v-if="item" class="pay-info">
            <div v-if="index < 3" class="info-line">
              账号：{{ item.account_num }}
            </div>
            <div v-if="index == 3" class="info-line">
              卡号：{{ item.bank_num }}
            </div>
            <div v-if="index < 4" class="info-line">
              账户名称：{{ item.name }}
            </div>
            <div class="info-line">
              账号类型：{{ index | fixType }}
            </div>
            <div v-if="index == 3" class="info-line">
              支行名称：{{ item.account_num }}
            </div>
          </div>
          <div v-else class="pay-info">
            <div v-if="index < 3" class="info-line">
              账号：未设置
            </div>
            <div v-if="index < 4" class="info-line">
              账户名称：未设置
            </div>
            <div v-if="index == 3" class="info-line">
              卡号：未设置
            </div>
            <div class="info-line">
              账号类型：未设置
            </div>
            <div v-if="index == 3" class="info-line">
              银行名称：未设置
            </div>
          </div>
        </div>
        <div class="vant-btn">
          <button @click="OpenUrl(index)">
            设置
          </button>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
  import {
    getPayInfo
  } from '@/api/mine/mine.js'
  export default {
    data() {
      return {
        alipayImg: '../../../static/mine/pay/alipay.png',
        wechatImg: '../../../static/mine/pay/wechat.png',
        bankImg: '../../../static/mine/pay/bank.png',
        usdtImg: '../../../static/mine/pay/usdt.png',
        index: 1,
        payInfo: []
      }
    },
    filters: {
      fixType(val) {
        return val == 1 ? '支付宝' : val == 2 ? '微信' : val == 3 ? '银行卡' : val == 4 ? 'USDT' : ''
      }
    },
    methods: {
      getInfo() {
        const vm = this
        getPayInfo().then(res => {
          if (res.code == 1) {
            const payInfo = res.data
            for (const i in payInfo) {
              if (Object.prototype.toString.call(payInfo[i]) == '[object Array]') {
                payInfo[i] = null
              }
            }
            uni.hideLoading()
            vm.payInfo = payInfo
          }
        })
      },
      OpenUrl(index){
        console.log(index);
        this.$ui.push('/pages/mine/pay_term/set_pay?type='+index)
      }
    },
    onShow() {
      this.$ui.loading('加载中')
      this.getInfo()
    }

  }
</script>

<style lang="less">
  .payment-term {
    .pay-list {
      padding: 0 30rpx;

      .pay-item {
        padding: 30rpx 30rpx 30rpx 40rpx;
        margin-top: 36rpx;
        background: #FFFFFF;
        border-radius: 30rpx;
        box-shadow: 0 0 0.267rem rgba(0, 0, 0, 0.1);

        .item-left {
          align-items: flex-start;
        }

        .pay-img {
          width: 120rpx;
          height: 120rpx;
          margin-right: 20rpx;
        }

        .info-line {
          font-size: 24rpx;
          margin-bottom: 20rpx;
        }

        .vant-btn {
          margin: 0;

          .van-button {
            width: 128rpx;
            height: 72rpx;
            line-height: 72rpx;
            font-size: 24rpx;
            border-radius: 10rpx;
            background: #1D9B01;
          }
        }
      }
    }
  }
</style>
